import {StackNavigator, TabNavigator, DrawerNavigator, SafeAreaView, DrawerItems} from 'react-navigation'
import HomePage from './HomePage'
import Page1 from './Page1'
import Page2 from './Page2'
import Page3 from './Page3'
import Page4 from './Page4'
import Page5 from './Page5'
import React from 'react'
import FasterLitst from './FasterLitst'
import SectionLitst from './SectionLitst'
import ListViewDemo from './ListViewDemo'
import StyleDemo from './StyleDemo'
import TitleBar from './TitleBar'
import {Button} from 'react-native'
import Ionicons from 'react-native-vector-icons/Ionicons'
import MaterialIcons from 'react-native-vector-icons/MaterialIcons'
import FetchDemo from "./FetchDemo";
import SV from "./SV";
import Welcome from "../js/home/Welcome";
import MyPage from "../js/mine/MyPage"

export const DrawerNav = DrawerNavigator({
    Page4: {
        screen: Page4,
        navigationOptions: {
            drawerLabel: 'Page4',
            drawerIcon: ({tintColor}) => (
                <MaterialIcons
                    name={"drafts"}
                    size={24}
                    style={{color: tintColor}}
                />
            )

        }
    },
    Page5: {
        screen: Page5,
        navigationOptions: {
            drawerLabel: 'Page5',
            drawerIcon: ({tintColor}) => (
                <MaterialIcons
                    name={"drafts"}
                    size={24}
                    style={{color: tintColor}}
                />
            )

        }
    },

});

export const AppTabNavigator = TabNavigator({
    Page1: {
        screen: Page1,
        navigationOptions: {
            tabBarLabel: 'Page1',
            tabBarIcon: ({tintColor, focused}) => (
                <Ionicons
                    name={focused ? 'ios-home' : 'ios-home-outline'}
                    size={26}
                    style={{color: tintColor}}
                />
            ),
        }
    },
    Page2: {
        screen: Page2,
        navigationOptions: {
            tabBarLabel: 'Page2',
            tabBarIcon: ({tintColor, focused}) => (
                <Ionicons
                    name={focused ? 'ios-people' : 'ios-people-outline'}
                    size={26}
                    style={{color: tintColor}}
                />
            ),
        }
    },
    Page3: {
        screen: Page3,
        navigationOptions: {
            tabBarLabel: 'Page3',
            tabBarIcon: ({tintColor, focused}) => (
                <Ionicons
                    name={focused ? 'ios-chatboxes' : 'ios-chatboxes-outline'}
                    size={26}
                    style={{color: tintColor}}
                />
            ),
        }
    }
})

export default AppStackNavigator = StackNavigator({
    HomePage: {
        screen: HomePage,
        navigationOptions: {
            header: null,
        }
    },

    Page1: {
        screen: Page1,
        navigationOptions: ({navigation}) => ({
            title: `${navigation.state.params.name}页面名称`
        })
    },

    Page2: {
        screen: Page2
    },

    Page3: {
        screen: Page3,
        navigationOptions: (props) => {
            const {navigation} = props;
            const {state, setParams} = navigation;
            const {params} = state;
            return {
                title: params.title ? params.title : 'this is page3',
                headerRight: (
                    <Button
                        title={params.mode === 'edit' ? '保存' : '编辑'}
                        onPress={() => {
                            setParams({mode: params.mode == 'edit' ? "" : "edit"})
                        }}
                    />
                )
            }
        }
    },

    TabNav: {
        screen: AppTabNavigator,
        navigationOptions: {
            title: 'This is AppTabNavigator'
        }
    },

    DrawerNav: {
        screen: DrawerNav,
        navigationOptions: {
            title: "drawerNavi"
        }
    },

    FasterLitst: {
        screen: FasterLitst,
        navigationOptions: {
            title: "FasterListDemo"
        }
    },

    SectionList: {
        screen: SectionLitst,
        navigationOptions: {
            title: "SectionList"
        }
    },

    ListViewDemo: {
        screen: ListViewDemo,
        navigationOptions: {
            title: "ListViewDemo"
        }
    },

    StyleDemo: {
        screen: StyleDemo,
        navigationOptions: {
            title: "StyleDemo"
        }
    },

    TitleBar: {
        screen: TitleBar,
        navigationOptions: {
            title: "TitleBar"
        }
    },

    Fetch: {
        screen: FetchDemo,
        navigationOptions: {
            title: 'fetchdemo'
        }
    },

    SV: {
        screen: SV,
        navigationOptions: {
            title: "scrolloview"
        }
    },

    Welcome: {
        screen: Welcome,
        navigationOptions: {
            title: 'welcome'
        }
    },

    MyPage: {
        screen: MyPage,
        navigationOptions: {
            // title: 'mypage'
            header:null
        }
    }

});